<script xmlns="http://www.w3.org/1999/html">
export default {
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
      count: 3,
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      comment: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    load () {
      // this.count += 2
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}
</script>

<template>
  <div>
    <h1>茶现广场</h1>

<!--    添加文章    -->
    <el-button class="el-icon-plus" style="float: right" type="primary"  @click="dialogFormVisible = true">
      发布文章
    </el-button>




    <el-dialog title="发布文章" v-model="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="文章标题" style="display: inline-block;width: 600px">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="文章内容">
          <el-input type="textarea"></el-input>
        </el-form-item>

        <div class="demo-image">
          <div class="block" v-for="fit in fits" :key="fit"
               style="display: inline-block;width: 150px; height: 150px;margin-left: 30px"
          >
            <el-image
                style="width: 150px; height: 150px"
                :src="url"
                :fit="fit"></el-image>
          </div>
        </div>

        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        上传图片
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">发 布</el-button>
      </div>
    </el-dialog>













    <div v-for="i in 3" class="article">
<!--   用户头像  -->
<!--      <div class="block user-info" >-->
        <el-avatar :size="50" :src="circleUrl" style="height: 50px"></el-avatar>
<!--   昵称-->
        <span style="display: inline-block;color: cornflowerblue;
            font-size: 20px;
          "
        >
          兜兜里有钱
        </span>
<!--      </div>-->

      <el-card class="box-card" style="width: 1000px">
        <div slot="header" class="clearfix">
          <div class="title">一茶一世界，一味一人生</div>
        </div>
        <div class="content">
          <span v-for="i in 8">&nbsp;</span>
          茶道是一种以茶为媒的生活礼仪，也被认为是修身养性的一种方式。它通过沏茶、赏茶、饮茶以增进友谊，美心修德，
          学习礼法，是很有益的一种仪式。喝茶能静心、静神，有助于陶冶情操、去除杂念，这与提倡“清静、恬淡”的东方哲学
          思想很合拍，也符合佛、道、儒“内省修行”的思想。茶道精神是茶文化的核心，是茶文化的精髓。
        </div>

<!--     文章图片   -->
        <div class="demo-image">
          <div class="block" v-for="fit in fits" :key="fit"
               style="display: inline-block;width: 150px; height: 150px;margin-left: 30px"
          >
            <el-image
                style="width: 150px; height: 150px"
                :src="url"
                :fit="fit"></el-image>
          </div>
        </div>

      </el-card>

      <div style="display: block;width: 1000px;margin-bottom: 50px">
        <div style="float: right">
          <el-button class="el-icon-thumb">点赞</el-button><el-button>评论</el-button>
        </div>

      </div>

      <div>
        <el-card class="box-card" style="width: 1000px">
          <div slot="header" class="clearfix">
            <span>评论列表</span>
          </div>
          <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;margin-left: -40px">

            <li v-for="i in count" class="infinite-list-item"  style="margin-bottom: 25px">

              <div style="width: 800px;">

                <!--   用户头像  -->
                <!--      <div class="block user-info" >-->
                <el-avatar :size="50" :src="circleUrl" style="height: 50px"></el-avatar>
                <!--   昵称-->
                <span>兜兜里有钱</span>

                <el-badge :value="3" class="item" style="float: right">
                  <el-button class="el-icon-thumb" ></el-button>
                </el-badge>
              </div>

              <div>
                评论内容：
                1{{ i }}
              </div>


            </li>
          </ul>

        </el-card>
      </div>

      <div>
        <el-input style="display: inline-block;width: 800px" v-model="comment"></el-input>
        <el-button class="el-icon-s-promotion" type="primary">发布评论</el-button>
      </div>

    </div>





  </div>
</template>

<style scoped>
  .user-info{
    background-color: red;
    height: 100px;
    display: inline-block;
  }

  .title{
    height: 20px;
    background-color: cornflowerblue;
    font-size: 28px;
    font-weight: bolder;
    display: block;
    width: 600px;
    margin-bottom: 30px;
  }

  .content{
    background-color: chocolate;
    display: block;
    width: 800px;
    font-size: 20px;
    line-height: 40px;
    margin-bottom: 40px;
  }

  li{
    list-style-type: none;
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }

  .article{
    margin-bottom: 120px;
  }

</style>